<template>
  <div class="DeviceSituation">
    <div class="device">
      <div class="device-sum">
        <div class="device-sum__data">
          <span class="device-sum__data__name">告警数量</span>
          <span class="device-sum__data__value">3</span>
        </div>

        <i class="Separator"></i>

        <ul class="device-sum__list">
          <li class="device-sum__list__type">
            <p>已处理： 3</p>
          </li>
          <li class="device-sum__list__type">
            <p>未处理： 0</p>
          </li>
          <li class="device-sum__list__type">
            <p>待处理： 3</p>
          </li>
        </ul>
      </div>

      <div class="device-type">
        <div class="device-type__data">
          <span class="device-type__data__name">告警类型：</span>
          <span class="device-type__data__value">3</span>
        </div>

        <i class="Separator"></i>

        <div class="device-type__pie">
          <chart-view
            :chart-option="deviceStatisticsOption"
            :auto-resize="true"
            height="100%"
          />
        </div>
      </div>
    </div>

    <i class="Separator"></i>

    <div class="device-type-list">
      <ul class="device-type-list__header">
        <li class="device-type-list__header__column" style="width: 14%">
          <span>序号</span>
        </li>
        <li class="device-type-list__header__column" style="width: 14%">
          <span>名称</span>
        </li>
        <li class="device-type-list__header__column" style="width: 18%">
          <span>告警等级</span>
        </li>
        <li class="device-type-list__header__column" style="width: 12%">
          <span>告警值</span>
        </li>
        <li class="device-type-list__header__column" style="width: 12%">
          <span>告警类型</span>
        </li>
        <li class="device-type-list__header__column" style="width: 12%">
          <span>阈值</span>
        </li>
        <li class="device-type-list__header__column" style="width: 18%">
          <span>时间</span>
        </li>
      </ul>
      <div class="device-type-list__content">
        <ul
          v-for="i in areaDeviceStatistics"
          :key="i.code"
          class="device-type-list__content__row"
        >
          <li class="device-type-list__content__row__column" style="width: 14%">
            <span>{{ i.code }}</span>
          </li>
          <li class="device-type-list__content__row__column" style="width: 14%">
            <span>{{ i.area }}</span>
          </li>
          <li
            class="device-type-list__content__row__column"
            style="width: 18%; color: #fbea71"
          >
            <span>{{ i.number }}</span>
          </li>
          <li class="device-type-list__content__row__column" style="width: 12%">
            <span>{{ i.online }}</span>
          </li>
          <li class="device-type-list__content__row__column" style="width: 12%">
            <span>{{ i.offline }}</span>
          </li>
          <li class="device-type-list__content__row__column" style="width: 12%">
            <span>{{ i.alar }}</span>
          </li>
          <li class="device-type-list__content__row__column" style="width: 18%">
            <span>{{ i.time }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  alarStatisticsData,
  areaDeviceStatisticsData,
} from "../../../temp/data";
import { deviceStatisticsPie } from "./config/deviceStatistics.js";
export default {
  name: "DeviceSituation",
  data() {
    return {
      deviceStatisticsOption: {},
      deviceStatistics: {},
      areaDeviceStatistics: [],
    };
  },
  created() {
    this.deviceStatistics = alarStatisticsData();
    this.areaDeviceStatistics = areaDeviceStatisticsData();
    this.deviceStatisticsOption = deviceStatisticsPie(this.deviceStatistics);
  },
  methods: {},
};
</script>

<style scoped lang='less'>
.DeviceSituation {
  width: 100%;
  height: 100%;
}

.Separator {
  display: block;
  width: 100%;
  height: 0.25vh;
  background: linear-gradient(90deg, #65aeeeff, #65aeee22);
  box-shadow: 0px 0px 4px 0px #65aeee44;
  margin: 0.5vh 0;
}

.device {
  width: 100%;
  height: 60%;
  display: flex;
  .device-sum,
  .device-type {
    width: 50%;
    height: 100%;
    &__data {
      width: 100%;
      height: 15%;
      display: flex;
      font-size: 1.125rem;
      color: #eee;
    }

    &__list {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: calc(100% - 15% - 1.25vh);
      &__type {
        width: 50%;
        font-size: 0.875rem;
        color: #eee;
      }
    }
  }

  .device-type__pie {
    height: calc(100% - 15% - 1.25vh);
    width: 100%;
  }
}

.device-type-list {
  width: 100%;
  height: calc(100% - 60% - 1.25vh);

  &__header {
    width: 100%;
    height: 25%;
    background: #044578;
    display: flex;
    justify-content: space-between;

    &__column {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 14%;
      height: 100%;
      color: #5bc3f7;
    }
  }

  &__content {
    width: 100%;
    height: 75%;
    overflow-y: scroll;

    &__row {
      width: 100%;
      display: flex;
      justify-content: space-between;

      &__column {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #bcd5ea;
      }
    }
  }
}

.device-type-list__content::-webkit-scrollbar {
  width: 0;
}
</style>
